<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用户名 : <input type="text" class="uname" /> <span class="info">提示</span>
    <script>
      // ajax : 1. 必须要基于服务器 2.发送ajax 的页面和请求的地址必须是同源；
      //同源： 协议 、域名 、端口 都要一致
      // html运行的地址 ： http://localhost:8989/
      // ajax 请求的地址 ： http://localhost:8989/checkuser?uname=%E6%9D%8E%E5%9B%9B111
      // 非同源，跨域；

      let unameEle = document.querySelector(".uname");
      unameEle.onblur = function () {
        let uname = unameEle.value; //获取当前用户名,提交到后端校验是否正确
        let xhr = new XMLHttpRequest();
        xhr.open("get", `http://localhost:8989/checkuser?uname=${uname}`);

        xhr.onload = function () {
          // 是异步 ；
          // console.log(xhr.responseText)
          let result = JSON.parse(xhr.responseText);
          console.log(result);
          document.querySelector(".info").innerHTML = result.info;
        };
        xhr.send();
      };
    </script>
  </body>
</html>
